<template>
    <div id="loginPage">
        <form class="loginform" @keyup.enter="Login()">
            <div>
                <div class="phone">
                    <el-input type="phone" class="loginform-phone" v-model="formData.phone" clearable placeholder="手机号"
                        prefix-icon="el-icon-user">
                    </el-input>
                </div>
                <div class="password">
                    <el-input type="password" class="loginform-password" v-model="formData.password" placeholder="密码"
                        show-password prefix-icon="el-icon-key"></el-input>
                </div>
                <div>
                    <el-button style="margin: 10px 5px 5px 5px" type="success" @click="Login">登录</el-button>
                    <el-button type="primary" @click="Register">注册</el-button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    import Vue from 'vue';
    export default {
        name: 'loginPage',
        data() {
            return {
                formData: {
                    phone: '',
                    password: '',
                }
            };
        },
        methods: {
            Login() {
                if (this.formData.phone.trim() && this.formData.password.trim()) {
                    this.$POST('/login/CheckUser', this.formData).then((res) => {
                        this.$message({
                            message: '登录成功',
                            type: 'success',
                            center: true,
                            duration: 800,
                        })
                        this.$store.commit('SetAccountInfo', {
                            id: res.data?.data[0]?.id,
                            userName: res.data?.data[0]?.userName,
                            phone: res.data?.data[0]?.phone,
                            email: res.data?.data[0]?.email
                        })
                        try {
                            let info = JSON.parse(window.localStorage.getItem('HuiLY'))
                            if (info) {
                                info.userinfo = {
                                    id: res.data?.data[0]?.id,
                                    userName: res.data?.data[0]?.userName,
                                    phone: res.data?.data[0]?.phone,
                                }
                            } else {
                                info = {
                                    userinfo: {
                                        id: res.data?.data[0]?.id,
                                        userName: res.data?.data[0]?.userName,
                                        phone: res.data?.data[0]?.phone,
                                    }
                                }
                            }
                            window.localStorage.setItem('HuiLY', JSON.stringify(info))
                        } catch (error) {

                        }
                        this.$_initWebSocket({ userID: this.$store.state.accountInfo.id })
                            .then((socket) => {
                                this.$notify({
                                    message: '连接成功',
                                    type: 'success',
                                    showClose: false,
                                    duration: 800
                                })
                                Vue.prototype.$socket = socket
                                window.huily = socket
                            }, () => { })
                        this.$router.replace({
                            name: 'main'
                        })
                    }).catch((response) => {
                        this.$message({
                            message: response.data.msg,
                            type: 'error',
                            center: true,
                            duration: 1000,
                        })
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '手机号或密码不能为空!',
                        showClose: true,
                        duration: 800,
                        center: true,
                    })
                    this.formData = {
                        phone: '',
                        password: '',
                    }
                }
            },
            Register() {
                this.$router.push({
                    name: 'register'
                })
            }
        }
    }
</script>

<style scoped lang="less">
    #loginPage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-image: url('@/assets/img/login/BGI.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;

        .loginform {
            // 容器主属性
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 600px;
            height: 400px;
            min-width: 400px;
            min-height: 400px;
            border-radius: 10px;
            box-shadow: 25px 25px 45px rgba(0, 0, 0, 0.5);
            background-color: rgba(240, 240, 240, .3);

            .phone,
            .password {
                margin: 20px 5px 5px 5px;
            }

            & .loginform-phone,
            & .loginform-password {
                width: 250px !important;
            }
        }
    }
</style>